<template>
	<div class="resource">
		<section class="resource-carousel">
			<!-- 多级 -->
			<template v-if="isMulti && isSchool">
				<ul class="resource-counts maxW">
					<li>
						<i class="icon"></i>
						<strong class="count-word">
							上周资源更新：
							<i :title="resourceCountData.resource_last_nums">{{ resourceCountData.resource_last_nums }}</i>
							条
						</strong>
					</li>
					<li>
						<i class="icon"></i>
						<strong class="count-word">
							资源总数：
							<i :title="resourceCountData.all_resource_nums">{{ resourceCountData.all_resource_nums }}</i>
							条
						</strong>
					</li>
					<li>
						<i class="icon"></i>
						<strong class="count-word">
							上周试题更新：
							<i :title="resourceCountData.test_question_last_nums">{{ resourceCountData.test_question_last_nums }}</i>
							条
						</strong>
					</li>
					<li>
						<i class="icon"></i>
						<strong class="count-word">
							试题总数：
							<i :title="resourceCountData.all_question_nums">{{ resourceCountData.all_question_nums }}</i>
							条
						</strong>
					</li>
					<li>
						<i class="icon"></i>
						<strong class="count-word">
							总容量：
							<i :title="resourceCountData.all_size">{{ resourceCountData.all_size }}</i>
						</strong>
					</li>
				</ul>
			</template>
			<!-- 轮播图 -->
			<template>
				<el-carousel class="homepage-carousel" :interval="5000" height="400px">
					<el-carousel-item v-for="(item, index) in carouselPicData" :key="index">
						<a :href="item.link_url == '' ? false : item.link_url" :target="item.link_url == '' ? '_Self' : '_Blank'"><img :src="BASE_URL + item.picture" /></a>
					</el-carousel-item>
				</el-carousel>
			</template>
			<!-- 单级 -->
			<template v-if="!isMulti">
				<!-- <div class="i_muenList" ref="resourceFloor">
					<div class="i_muenList_l">
						<div class="i_muenNav">
							<p>教学资源</p>  
							<ul class="org_list">
								<li class="i_muenS" v-for="(item, index) in orgData" :key="index">
									<a href="##">
										<i :class="[index % 3 == 0 ? 'ipng icon_xiaoxue' : index % 3 == 1 ? 'ipng chuzhong' : 'ipng icon_gaozhong']"></i>
										{{ item.name }}
									</a>
									<i class="ipng Shape_03"></i>
									<div :class="['i_muenL', 'i_muenTop' + parseInt(index + 1)]">
										<div class="i_muenClassifyBox">
											<div class="mCustomScrollBox">
												<ul>
													<li v-for="(item1, index1) in item['children']" :key="index1">
														<div class="i_muenClassifyT">
															<span>{{ item1.name }}</span>
														</div>
														<div class="i_muenClassifyC clear">
															<span v-for="(item2, index2) in item1['subject']" :key="index2">
																<router-link :to="{ name: 'resourceList', params: {sectionId: item.id, gradeId: item1.id, subjectId: item2.id}}">
																	{{ item2.name }}
																</router-link>
															</span>
														</div>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="i_floorBox2">
						<div class="floor-img"><img src="../../../assets/images/floor.png" /></div>
						<ul>
							<li>
								<span>上周资源更新：</span>
								<strong id="resource_last_nums">{{ resourceCountData.resource_last_nums }}</strong>
							</li>
							<li>
								<span>资源总数：</span>
								<strong id="all_resource_nums">{{ resourceCountData.all_resource_nums }}</strong>
							</li>
							<li>
								<span>上周试题更新：</span>
								<strong id="test_question_last_nums">{{ resourceCountData.test_question_last_nums }}</strong>
							</li>
							<li>
								<span>试题总数：</span>
								<strong id="all_question_nums">{{ resourceCountData.all_question_nums }}</strong>
							</li>
							<li>
								<span>总用量：</span>
								<strong id="all_size">{{ resourceCountData.all_size }}</strong>
							</li>
						</ul>
					</div>
				</div> -->
			</template>
		</section>

        <section class="i_application resourceFloor maxW" style="padding-bottom:30px;">
            <div class="i_applicationTitle clear">
                <span>推荐资源</span>
                <router-link class="i_more fr" to="/home/resourceList">
                    更多
                    <i class="ipng Shape_13"></i>
                </router-link>
            </div>
            <div class="i_hResourcesBox">
                <resourceRow :opctions="recommendData"></resourceRow>
            </div>
        </section>

		<div class="i_advert maxW"><img :src="BASE_URL + '/static/index/images/banner/image05.png'" /></div>
		<section class="i_application albumFloor maxW" ref="albumFloor">
			<div class="i_applicationTitle">
				<span>
					优课专辑
					<i>推荐</i>
				</span>
				<router-link class="i_more fr" to="/home/albumList">
					更多
					<i class="ipng Shape_13"></i>
				</router-link>
			</div>

			<div class="i_hotBox alumni-lists clear">
				<ablumRow class="resource-album" :opctions.sync="albumListData"></ablumRow>
			</div>
		</section>
	</div>
</template>

<script>
import resourceRow from '../base/resource-row'
import ablumRow from '../base/album-row'

export default {
	components: {
		resourceRow,
		ablumRow
	},
	data() {
		return {
			carouselPicData: [],
			orgData: [],
			resourceCountData: [],
			recommendData: [],
			albumListData: [],
		};
	},
	created() {
		this.getCarouselPic();
		if (!this.isMulti) {
			this.getOrg();
		}
		this.getResourceCount();
		this.getAlbumData();
		this.recommendResource();
	},
    computed: {
      	isMulti(){
          	return this.$store.getters.isMulti;
      	},
		isSchool(){
			return this.$store.getters.isSchool;
      	}
    },
	methods: {
		//轮播图
		getCarouselPic() {
			let success = res => {
				this.carouselPicData = res.data;
			};
			this.$ajax({
				url: 'api/carousel/banners',
				method: 'get',
				params: {
					module: 2
				},
				func: {
					success: success
				}
			});
		},
		// 热门推荐
		getOrg() {
			let success = res => {
				this.orgData = res.data;
			};
			this.$ajax({
				url: 'api/org/org',
				method: 'get',
				params: {
					level: 2,
					direction: 'down',
					status: 1
				},
				func: {
					success: success
				}
			});
		},
		// 获取资源统计数据
		getResourceCount() {
			let _this = this;
			_this
				.$ajax('api/resource/get_nums', {
					params: {}
				})
				.then(function(resp) {
					_this.resourceCountData = resp.data;
				});
		},
		// 推荐资源
		recommendResource() {
			let success = res => {
                const data = deep_clone(res.data);
				const pleaceholder = new Array(8 - data.length);
				this.recommendData = [...data,...pleaceholder];
			};
			this.$ajax({
				url: 'api/resource/resource',
				method: 'get',
				params: {
					orderby: 'clicks',
					page: 1,
					size: 8,
					authonity: 1,
					not_in_file_type: 2,
					status: 1
				},
				func: {
					success: success
				}
			});
		},
		// 获取推荐的优课专辑
		getAlbumData() {
			let success = res => {
				const flag = Object.keys(res.data).includes('data');
				const data = flag ? res.data.data : res.data;
				const pleaceholder = new Array(8 - data.length);
				this.albumListData = [...data,...pleaceholder];
			};
			this.$ajax({
				url: 'api/album/albums_list',
				method: 'get',
				params: {
					order_by: 'hot',
					page_index: 1,
					page_size: 8
				},
				func: { success: success }
			});
		}
	}
};
</script>

<style lang="scss">
	.resource-album{
		grid-template-rows: repeat(2, 1fr)!important;
		padding-bottom: 20px;
	}
	.resource-counts {
		width: 100%;
		height: 40px;
		margin: 15px auto;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: 1fr;
		align-items: center;
		justify-items: center;
		background-color: #fff;
        border-radius: 3px;
        box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
        .count-word{
            font-size: 14px;
            i{
                display: inline-block;
                color: #eba300;
                max-width: 80px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
	}
</style>
